<template>
	<div class="body-xx">
		<div class="container-xx">
			<div class="ceng1-xx">
				<div class="left-xx">
					<img :src="require('../../assets/images/logo.png')" alt="">
				</div>
				<div class="right-xx">
					<el-button type="primary" size="mini">编辑</el-button>
				</div>
			</div>
			<div class="ceng2-xx" v-for="item in ceng2_xx">
				<div class="left-xx">
					{{ item.name }}
				</div>
				<div class="right-xx">
					{{ item.txt }}
				</div>
			</div>
			<ul class="ceng3-xx">
				<li v-for="item in ceng3_xx">
					<div class="left-xx">{{ item.name }}</div>
					<div class="right-xx">{{ item.txt }}</div>
				</li>
			</ul>
			<div class="ceng4" v-for="item in ceng4_xx">
				<div class="left-xx">
					{{ item.name }}
				</div>
				<div class="right-xx">
					{{ item.txt }}
				</div>
			</div>
			<div class="title-xx">
				<div class="left-xx">
					<i></i>
					<span>荣誉资质</span>
				</div>
			</div>
			<ul class="tabs-xx">
				<li v-for="(item, index) in tabs1_xx" :class="item.class" @click="tabs1(index, $event)" :key="index">
					{{ item.li }}
				</li>
			</ul>
			<div class="tab-img-xx" v-for="(item, index) in zmd1_xx" v-show="index == isShow" :key="index">
				<el-carousel :interval="4000" type="card" height="200px">
					<el-carousel-item v-for="i in item.listitem" :key="i">
						<div class="imgset-xx">
							<img :src="i.img" alt="">
							<span>{{ i.name }}</span>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="title-xx">
				<div class="left-xx">
					<i></i>
					<span>合作关系</span>
				</div>
			</div>
			<ul class="tabs-xx">
				<li v-for="(item, index) in tabs2_xx" @click="tabs2(index, $event)" :key="index" :class="item.class">
					{{ item.li }}
				</li>
			</ul>
			<div class="tab2-img-xx" v-for="(item, index) in zmd2_xx" v-show="index == isShow2" :key="index">
				<el-carousel :interval="4000" height="200px" indicator-position="outside">
					<el-carousel-item v-for="i in item.listitem" :key="i">
						<img :src="j.img" alt="" v-for="j in i.listitem">
					</el-carousel-item>
				</el-carousel>
			</div>

			<div class="title-xx">
				<div class="left-xx">
					<i></i>
					<span>其它信息</span>
				</div>
				<button></button>
			</div>
			<ul class="tabs-xx">
				<li v-for="(item, index) in tabs3_xx" :class="item.class" @click="tabs3(index, $event)" :key="index">
					{{ item.li }}
				</li>
			</ul>
			<div class="tab-img-xx" v-for="(item, index) in zmd3_xx" v-show="index == isShow3" :key="index">
				<el-carousel :interval="4000" type="card" height="200px">
					<el-carousel-item v-for="i in item.listitem" :key="i">
						<div class="imgset-xx">
							<img :src="i.img" alt="">
							<span>{{ i.name }}</span>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>

		</div>
	</div>

</template>

<script>
export default {
	data() {
		return {
			isShow: 0,
			isShow2: 0,
			isShow3: 0,
			ceng2_xx: [
				{
					name: "企业名称：",
					txt: "a公司"
				},
				{
					name: "个性签名：",
					txt: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
				}
			],
			ceng3_xx: [
				{
					name: "所属行业：",
					txt: "it"
				},
				{
					name: "企业性质：",
					txt: "私营企业"
				},
				{
					name: "注册资金：",
					txt: "1000万"
				},
				{
					name: "法人代表：",
					txt: "王小虎"
				},
				{
					name: "统一社会信用代码：",
					txt: "abc000"
				},
				{
					name: "成立时间：",
					txt: "2024-01-01"
				}
			],
			ceng4_xx: [
				{
					name: "企业地址：",
					txt: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
				},
				{
					name: "主营产品：",
					txt: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
				},
				{
					name: "企业介绍：",
					txt: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
				}
			],
			tabs1_xx: [
				{
					li: "食品经营许可证",
					class: "on"
				},
				{
					li: "建筑资质",
					class: ""
				},
				{
					li: "安全生产许可证",
					class: ""
				},
				{
					li: "排污许可证",
					class: ""
				},
				{
					li: "办学许可证",
					class: ""
				}
			],
			zmd1_xx: [
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质4"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				}
			],
			tabs2_xx: [
				{
					li: "企业客户",
					class: "on"
				},
				{
					li: "服务机构",
					class: ""
				},
				{
					li: "园区平台",
					class: ""
				}
			],
			zmd2_xx: [
				{
					listitem: [
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								},
								{
									img: require("../../assets/images/xx-img_26.png")
								},
								{
									img: require("../../assets/images/xx-img_27.png")
								},
								{
									img: require("../../assets/images/xx-img_28.png")
								},
								{
									img: require("../../assets/images/xx-img_29.png")
								},
								{
									img: require("../../assets/images/xx-img_30.png")
								}
							]
						},
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								}
							]
						}
					]
				},
				{
					listitem: [
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								},
								{
									img: require("../../assets/images/xx-img_26.png")
								},
								{
									img: require("../../assets/images/xx-img_27.png")
								},
								{
									img: require("../../assets/images/xx-img_28.png")
								},
								{
									img: require("../../assets/images/xx-img_29.png")
								},
								{
									img: require("../../assets/images/xx-img_30.png")
								}
							]
						},
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								}
							]
						}
					]
				},
				{
					listitem: [
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								},
								{
									img: require("../../assets/images/xx-img_26.png")
								},
								{
									img: require("../../assets/images/xx-img_27.png")
								},
								{
									img: require("../../assets/images/xx-img_28.png")
								},
								{
									img: require("../../assets/images/xx-img_29.png")
								},
								{
									img: require("../../assets/images/xx-img_30.png")
								}
							]
						},
						{
							listitem: [
								{
									img: require("../../assets/images/xx-img_01.png")
								},
								{
									img: require("../../assets/images/xx-img_03.png")
								},
								{
									img: require("../../assets/images/xx-img_05.png")
								},
								{
									img: require("../../assets/images/xx-img_07.png")
								},
								{
									img: require("../../assets/images/xx-img_09.png")
								},
								{
									img: require("../../assets/images/xx-img_16.png")
								},
								{
									img: require("../../assets/images/xx-img_17.png")
								},
								{
									img: require("../../assets/images/xx-img_18.png")
								},
								{
									img: require("../../assets/images/xx-img_19.png")
								},
								{
									img: require("../../assets/images/xx-img_20.png")
								}
							]
						}
					]
				}
			],
			tabs3_xx: [
				{
					li: "分类1",
					class: "on"
				},
				{
					li: "分类2",
					class: ""
				},
				{
					li: "分类3",
					class: ""
				},
				{
					li: "分类4",
					class: ""
				},
				{
					li: "分类5",
					class: ""
				}
			],
			zmd3_xx: [
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质4"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						}
					]
				},
				{
					listitem: [
						{
							img: require("../../assets/images/xx-zs1.png"),
							name: "资质1"
						},
						{
							img: require("../../assets/images/xx-zs2.png"),
							name: "资质2"
						},
						{
							img: require("../../assets/images/xx-zs3.png"),
							name: "资质3"
						}
					]
				}
			]
		}
	},
	methods: {
		tabs1(index, e) {
			// alert("aaa");
			this.isShow = index;
			var linodes = e.target.parentNode.childNodes;
			for (let i = 0; i < linodes.length; i++) {
				linodes[i].classList.remove("on");
			}
			e.target.className = "on";
		},
		tabs2(index, e) {
			this.isShow2 = index;
			var linodes = e.target.parentNode.childNodes;
			for (let i = 0; i < linodes.length; i++) {
				linodes[i].classList.remove("on");
			}
			e.target.className = "on";
		},
		tabs3(index, e) {
			this.isShow3 = index;
			var linodes = e.target.parentNode.childNodes;
			for (let i = 0; i < linodes.length; i++) {
				linodes[i].classList.remove("on");
			}
			e.target.className = "on";
		}
	},
	created() {
	}
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.body-xx {
	width: 100%;
	height: 100%;
	background: url(../../assets/images/xx-bg.png) no-repeat scroll;
	background-size: 100% 100%;
	font-size: 20rem;
	font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;
	color: #676767;
}

.container-xx {
	width: 80%;
	height: 100%;
	margin: auto;
}

.ceng1-xx {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rem;
}

.ceng1-xx>.left-xx>img {
	width: 300rem;
}

.ceng2-xx {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 15rem;
}

.ceng2-xx>.left-xx {
	white-space: nowrap;
	font-weight: bold;
	color: #333;
}

.ceng2-xx>.right-xx {
	width: 94%;
	word-wrap: break-word;
	line-height: 30rem;
	color: #666;
}

.ceng3-xx {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15rem;
}

.ceng3-xx>li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	width: 33.33%;
}

.ceng3-xx>li>.left-xx {
	white-space: nowrap;
	font-weight: bold;
	color: #333;
}

.ceng3-xx>li>.right-xx {
	line-height: 30rem;
	color: #666;
}

.ceng4 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 15rem;
}

.ceng4>.left-xx {
	white-space: nowrap;
	font-weight: bold;
	color: #333;
}

.ceng4>.right-xx {
	width: 94%;
	word-wrap: break-word;
	line-height: 30rem;
	color: #999;
}

.title-xx {
	width: 100%;
	font-size: 28rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	color: #333;
	margin-top: 75rem;
}

.title-xx>.left-xx {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.title-xx>.left-xx>i {
	width: 5rem;
	height: 32rem;
	background-color: #338be1;
	display: inline-block;
	margin-right: 6rem;
}

.title-xx>button {
	width: 37rem;
	height: 36rem;
	background: url(../../assets/images/xx-edit.png) no-repeat scroll;
	background-size: 100% 100%;
	border: none;
	cursor: pointer;
}

.tab-img-xx {
	width: 100%;
	height: 400rem;
}

::v-deep .tab-img-xx .el-carousel__container {
	height: 400rem !important;
}

.imgset-xx {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.imgset-xx>img {
	width: 520rem;
	max-height: 372rem;
}

.imgset-xx>span {
	font-size: 20rem;
	padding-top: 4rem;
}

.tabs-xx {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 38rem;
	width: 100%;
	background-color: #f1f2f3;
	border-top: 2rem solid #e0dfe0;
	margin-bottom: 80rem;
}

.tabs-xx>li {
	margin-left: 38rem;
	margin-right: 38rem;
	cursor: pointer;
}

.tabs-xx>li.on {
	color: #338be1;
}

.tab2-img-xx {
	width: 100%;
	height: 670rem;
}

.tab2-img-xx img {
	width: 243rem;
	/* height: 191rem; */
	margin: 6rem 10rem;
}

::v-deep .tab2-img-xx .el-carousel__container {
	height: 94% !important;
}

::v-deep .tab2-img-xx .el-carousel__arrow--left {
	left: -70rem;
}

::v-deep .tab2-img-xx .el-carousel__arrow--right {
	right: 22rem;
}

::v-deep .tab2-img-xx .el-carousel__item {
	background-color: white;
}

::v-deep .tab2-img-xx .el-carousel__indicators--outside {
	padding-right: 80rem;
}

.tab2-img-xx .el-carousel {
	height: 100%;
	padding-left: 120rem;
}
</style>